<template>
<div>
  <div class="register">
    <div class="register-header">
        <router-link to="/home/index">
        <img src="../../public/img/personage/back.png" alt="">
        </router-link>
    </div>
    <h3>快速注册</h3>
  </div>
  <!-- 手机号/验证码 -->
  <div class="register-section">
    <div class="register-section-o">
    <i></i>
    <input type="text" placeholder="手机号" v-model="username">
    <span class="password-span">{{msg1}}</span>
    </div>
    <div class="register-section-t">
    <i></i>
    <input type="password" placeholder="密码" v-model="password">
    <span class="password-span">{{msg2}}</span>
    </div>
  </div>
  <!-- 确认按钮 -->
  <button class="affirm" @click="register()">确认</button>
  <!-- footer -->
  <div class="register-footer">
  <div class="register-footer-header">
    <router-link to="/home/myselflogin">密码登录</router-link>
  </div>
  <div class="register-footer-section">
    未注册手机验证后将自动进行注册,点击"确认"即表示您已阅读并同意以下协议
  </div>
  <div class="register-footer-bottom">
    <router-link to="">《微医服务协议》</router-link>
    <router-link to="">《法律声明及隐私权政策》</router-link>
  </div>
  </div>
  <!-- 目录 -->
  <div class="directory-listing" :class="show?'active':''">
    <ul>
      <li>
        <router-link to=""><img src="../../public/img/myself/2018-11-03_155010.png" alt="">首页</router-link>
      </li>
      <li>
        <router-link to=""><img src="../../public/img/myself/2018-11-03_155037.png" alt="">在线问诊</router-link>
      </li>
      <li>
        <router-link to=""><img src="../../public/img/myself/2018-11-03_154833.png" alt="">疾病导诊</router-link>
      </li>
      <li>
        <router-link to=""><img src="../../public/img/myself/2018-11-03_155120.png" alt="">我的关注</router-link>
      </li>
      <li>
        <router-link to=""><img src="../../public/img/myself/2018-11-03_155300.png" alt="">频道导航</router-link>
      </li>
      <li>
        <router-link to=""><img src="../../public/img/myself/2018-11-03_155325.png" alt="">个人中心</router-link>
      </li>
    </ul>
  </div>
  <div class="directory" @click="getshow()">
    <img src="../../public/img/myself/weiyi-logo-blue.png" alt="">
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
    show:false,
    username:"",
    password:"",
    msg1:"",
    msg2:""
    }
  },
  methods:{
    getshow(){
      this.show=!this.show;
    },
    created() {
     
    },
    //注册
    register(){
      var reg = /^\d{11}$/;
      var reg1 = /^[A-Za-z].*[0-9]|[0-9].*[A-Za-z]$/;
      if(!this.username){this.msg1="用户名不能为空";return};
      if(!this.password){this.msg2="密码不能为空";return};
      if(!reg.test(this.username)){this.msg2="用户名必须为11位数字！";return};
      if(!reg1.test(this.password)){this.msg2="密码必须包含数字和英文字母！";return};
      this.$axios.post("http://localhost:5050/inquire",`username=${this.username}`).then(res=>{
          this.msg = res.data;
          if(this.msg=="账号已被注册，请重新输入！"){this.msg1="账号已被注册，请重新输入！" ;return}
        if(this.msg=="账号可以使用"){
          this.msg1="";
          this.msg2="";
           this.$axios.post("http://localhost:5050/register",`username=${this.username}&password=${this.password}`).then(res=>{
          this.msg = res.data;
        if(this.msg=="注册成功"){
           this.$toast({
          message:"注册成功",
          position:"middle"
          })
           setTimeout(()=>{
            this.$router.push({path:'/home/myselflogin'});
           },3000)
        }
      })
        }
      })    
    }
  },

}
</script>

<style scoped>
div.register{
  position: relative;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0px 0px 10px 5px #f6f6f7;
  line-height: 40px;
}
div.register h3{
  text-align: center;
  color: #28354C;
  font-weight: 400;
  height: 40px;
}
div.register-header{
  position:absolute;
}
div.register-header img{
  height: 20px;
  width: 20px;
  margin-top:10px;
  margin-left: 13px;
}
div.register-section{
  margin: 0 auto;
  width: 100%;
  position: relative;
}
div.register-section-o input,div.register-section-t input{
  width: 100%;
  /* border-radius: 20px; */
  height: 32px;
  margin-top:10px;
  padding-left: 30px;
}
button.affirm{
  border: 1px solid #2F7FE2;
  text-align: center;
  color: #FFFFFF;
  background: #2F7FE2;
  display: block;
  height:45px;
  line-height: 45px;
  border-radius: 20px;
  margin-top:20px;
  width: 90%;
  margin:0 auto;
  outline: none;
}
div.register-section-t{
  margin-bottom: 10px;
}
div.register-section-o i{
  background-image: url("../../public/img/index/personage.png");
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  top:15px;
  left: 10px;
}
div.register-section-t i{
  background-image: url("../../public/img/index/code.png");
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  top:75px;
  left:10px;
}
div.register-footer-header a{
  text-align: center;
  color:  #3278EE;
}
div.register-footer-header{
  margin: 10px;
}
div.register-footer{
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
}
div.register-footer-bottom a,div.register-footer-header button{
  color: #3278EE;
}
div.register-footer-bottom{
  margin:10px;
}
div.directory img{
  height: 45px;
  width: 45px;
}
div.directory{
  position: fixed;
  bottom:40px;
  margin-left: 13px;

}
div.directory-listing ul{
  list-style:none;
  padding-left: 0px;
  margin:0px;
  width: 100px;
  border-radius: 10px;
}
div.directory-listing img{
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
div.directory-listing button{
  color:#333333;
  font-size: 14px;
}
div.directory-listing{
  border: 1px #2F7FE2 solid;
  font-size: 14px;
  border-radius: 10px;
  width: 100px;
  position: relative;
  z-index: 1;
  margin-left: 13px;
  opacity: 0;
  transition: all 2s;
}
div.directory-listing.active{
  opacity: 1;
}
div.directory-listing ul li{
  border-bottom: 1px #5B99E8 solid;
  padding-top:10px;
  padding-bottom: 10px;
}
div.directory-listing ul li:last-child{
  border-bottom:0;
  border-radius: 10px;
}
div.directory-listing:before{
  content: " ";
  position: absolute;
  top: 98%;
  left: 15px;
  width: 10px;
  height: 10px;
  border:1px solid #2F7FE2;
  border-left: 0px;
  border-top: 0px;
  transform: rotate(45deg);
  background: #FFFFFF;
  z-index: 2;
}
span.password-span{
  display: block;
  height: 15px;
  font-size: 14px;
  color: red;
  padding-left: 30px;
}
</style>
